 <template>
  <div style="height:100%">
    <!-- 搜素框 -->
    <el-form :inline="true" :model="queryParams" style="padding-top:20px;padding-left:20px;margin-bottom:10px;background-color:#fff;border-radius:8px" size="small">
      <el-form-item label="备忘录名称">
        <el-input v-model="queryParams.memoName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" type="primary" style="margin-left:30px">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <div style="height:82%;background-color:#fff;border-radius:8px;padding: 20px">
      <el-button type="primary" size="small" style="margin-bottom:20px" @click="add">新增</el-button>
      <el-table :data="tableData" stripe  height="80%" size="small" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
        <el-table-column prop="memoName" label="备忘录名称"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
        <el-table-column prop="feedback" label="完成反馈"></el-table-column>
        <el-table-column prop="state" label="完成状态" :formatter="statusFormatter"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="120px">
          <template scope="scope">
            <el-row>
              <el-col :span="8" v-if="scope.row.status == 0">
                <el-tooltip effect="dark" content="完成备忘录" placement="top-end">
                  <el-button type="success" icon="el-icon-check" circle size="mini" @click="complete(scope.row)"></el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="8">
                <el-tooltip effect="dark" content="编辑" placement="top-end">
                  <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="edit(scope.row)"></el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="8">
                <el-tooltip effect="dark" content="删除" placement="top-end">
                  <el-popconfirm title="确认删除吗？" @confirm="delSubMit(scope.row)">
                    <el-button content="删除" slot="reference" type="danger" icon="el-icon-delete" circle size="mini"></el-button>
                  </el-popconfirm>
                </el-tooltip>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-top:20px;height:40px;background-color:#fff;width: 100%;border-radius:8px;text-align:right">
        <el-pagination background layout="total,prev,pager,next" :total="total" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
    <!-- 弹出层 -->
    <el-dialog title="新增" :visible.sync="dialogFormAdd" width="800px" :close-on-click-modal="false">
      <el-form :model="addParams" :rules="rules" ref="addParams" label-width="160px" size="small" style="width:500px">
          <el-form-item label="备忘录名称" prop="memoName">
            <el-input v-model="addParams.memoName"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
                v-model="addParams.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
                v-model="addParams.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="描述" prop="bref">
            <el-input v-model="addParams.bref" type="textarea"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormAdd = false" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="addSubMit('addParams')">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 编辑弹出层 -->
    <el-dialog title="编辑" :visible.sync="dialogFormEdit" width="800px" :close-on-click-modal="false">
      <el-form :model="addParams" :rules="rules" ref="addParams" label-width="160px" size="small" style="width:500px">
        <el-form-item label="备忘录名称" prop="memoName">
          <el-input v-model="addParams.memoName"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
              v-model="addParams.startTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
              v-model="addParams.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="描述" prop="bref">
          <el-input v-model="addParams.bref" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" style="margin-top:50px">
        <el-button @click="dialogFormEdit = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="editSubMit('addParams')" size="mini">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="完成备忘录" :visible.sync="dialogFormComplete" width="800px" :close-on-click-modal="false">
      <el-form :model="completeParams" :rules="completeRules" ref="completeParams" label-width="160px" size="small" style="width:500px">
        <el-form-item label="反馈" prop="feedback">
          <el-input v-model="completeParams.feedback" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" style="margin-top:50px">
        <el-button @click="dialogFormComplete = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="completeSubMit('completeParams')" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      path:'/memo-info',
      queryParams: {
        memoName: "",
        page: 1,
        size: 10,
        userId:localStorage.getItem("userId")
      },
      total: 0,
      tableData: [],
      dialogFormAdd: false,
      dialogFormEdit: false,
      dialogFormComplete:false,
      addParams: {
        id:"",
        memoName: "",
        startTime:"",
        endTime: "",
        bref:""
      },
      rules: {
        memoName: [
          { required: true, message: '请输入备忘录名称', trigger: 'blur' },
        ],
        startTime: [
          { required: true, message: '请输入开始时间', trigger: 'blur' },
        ],
        endTime: [
          { required: true, message: '请输入结束时间', trigger: 'blur' },
        ]
      },
      completeParams:{
        id:"",
        feedback:""
      },
      completeRules: {
        feedback: [
          { required: true, message: '请输入反馈', trigger: 'blur' },
        ]
      },

    };
  },
  created() {
    this.list()
  },
  methods:{
    list() {
      this.axios({
        method: "get",
        url: this.path+"/list",
        params: this.queryParams,
      }).then((res) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    add(){//新增弹出层
      this.dialogFormAdd = true;
      this.addParams = {};
    },
    edit(row){//编辑弹出层
      this.addParams = row;
      this.dialogFormEdit = true;
    },
    onSearch(){
      this.list();
    },
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.list();
    },

    addSubMit(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false
        }else {
          this.addParams.userId = localStorage.getItem("userId")
          this.axios({
            method: "post",
            url: this.path+"/add",
            data: this.addParams,
          })
              .then((res) => {
                if (res.data.code === 200) {
                  this.dialogFormAdd = false;
                  this.$message({message: "添加成功",type: "success"});
                  this.list();
                } else {
                  this.$message.error(res.data.message);
                }
              });
        }
      })
    },
    delSubMit(row){//删除
      this.axios({
        method: "delete",
        url: this.path+"/delete",
        params: {
          id: row.id,
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message({message: "删除成功",type: "success"});
          this.list();
        }else{
          this.$message({type:"error",message: res.data.message});
        }
      });
    },
    editSubMit(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false
        }else {
          this.axios({
            method: "post",
            url: this.path+"/update",
            data: this.addParams,
          }).then((res) => {
            if (res.data.code === 200) {
              this.dialogFormEdit = false;
              this.$message({message: "修改成功",type: "success"});
              this.list();
            } else {
              this.$message.error(res.data.message);
            }
          });
        }
      })
    },
    statusFormatter(row){
      if(row.status == 0){
        return "待完成"
      }else if(row.status == 1){
        return "已完成"
      }else if(row.status == 2){
        return "已逾期"
      }
    },

    completeSubMit(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false
        }else {
          this.axios({
            method: "post",
            url: this.path+"/complete",
            data: this.completeParams,
          })
              .then((res) => {
                if (res.data.code === 200) {
                  this.dialogFormComplete = false;
                  this.$message({message: "操作成功",type: "success"});
                  this.list();
                } else {
                  this.$message.error(res.data.message);
                }
              });
        }
      })
    },
    complete(row){//编辑弹出层
      this.completeParams.id = row.id;
      this.completeParams.feedback = ""
      this.dialogFormComplete = true;
    },
  }
};
</script>

<style>

</style>